<template>
  <div class="pagewrapper p-12">
    <div class="pagewarpperbody m-0 bg_fff">
      <div ref="pageheader" class="flex aligncenter p-12">
        <el-button
          v-hasPermi="['system:grouptag:addlabelgroup']"
          type="primary"
          size="small"
          icon="el-icon-plus"
          class="mr-12"
          @click="handleTagGroup"
          >新建标签组</el-button
        >
        <span class="c_text3 f-14"
          >分组个数不限，每组最多100个群标签，群标签总数最多不超过3000个。</span
        >
      </div>
      <el-table
        :height="total > 0 ? tableHeight + 10 : 'auto'"
        v-loading="loading"
        :data="tableList"
        class="commtable"
      >
        <el-table-column
          label="标签组(2)	"
          prop="userName"
          min-width="200"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.name || "--" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="标签" prop="nickName" min-width="250px">
          <template slot-scope="scope">
            <div v-if="scope.row.tagList.length">
              <!-- <div class="mytag" v-for="(item,index) in scope.row.tagList" :key="index">{{item}}</div> -->
              <el-tag
                v-for="(item, index) in scope.row.tagList"
                :key="index"
                type="info"
                class="bg_fa mr-10"
              >
                <span class="c_text">{{ item }}</span>
              </el-tag>
            </div>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          width="180"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button v-hasPermi="['system:grouptag:addlabel']" type="text" @click="handleAdd(scope.row)" class="mr-12"
              >新增标签</el-button
            >
            <el-popover
              placement="top"
              trigger="manual"
              :ref="'popover-' + scope.row.id"
              width="350"
            >
              <div class="p_relative flex">
                <i class="el-icon-warning c_warning c_icon f-16" style="margin:5px 10px 0 0"></i>
                <div class="c_text2 f-14 mb-8 mt-5">
                  删除标签组后，也会删除相应的客户群标签是否确认删除?
                </div>
              </div>
              <div class="flexend">
                <el-button
                  size="mini"
                  type="text"
                  @click="handleVisibleClose(scope.row.id)"
                  >取消</el-button
                >
                <el-button
                  type="primary"
                  size="mini"
                  @click="handleDeleteOne(scope.row)"
                  >确定</el-button
                >
              </div>
              <el-button
                slot="reference"
                type="text"
                v-hasPermi="['system:grouptag:deletegroup']"
                @click="handleVisibleOpen(scope.row.id)"
                >删除组</el-button
              >
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        class="mt-0 pagination"
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <!-- 添加标签组 -->
    <AddTag v-if="openadd" :visable.sync="openadd" :rowItem="rowItem" />
  </div>
</template>
<script>
import { scriptItemList, changeOrder, delScriptItem } from "@/api/market/reply";
import tablemixins from "@/mixins/tablemixins";
import AddTag from "./components/AddTag.vue";
export default {
  data() {
    return {
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 10,
      tableList: [
        { id: 1, tagList: ["111", "士大夫十分"] },
        { id: 2, tagList: ["111", "士大夫十分"] },
        { id: 3, tagList: ["111", "士大夫十分"] },
        { id: 4, tagList: ["111", "士大夫十分"] },
        { id: 5, tagList: ["111", "士大夫十分"] },
        { id: 6, tagList: ["111", "士大夫十分"] },
      ],
      openadd: false,
      addopen: false,
      rowItem: null,
    };
  },
  mixins: [tablemixins],
  components: {
    AddTag,
  },
  methods: {
    getList() {
      // this.loading = true;
      // scriptItemList(this.queryParams)
      //   .then((response) => {
      //     this.tableList = response.itemList;
      //     this.total = response.total;
      //     this.loading = false;
      //   })
      //   .catch(() => {
      //     this.loading = false;
      //   });
    },

    handleTagGroup() {
      this.rowItem = null;
      this.openadd = true;
    },

    handleAdd(row) {
      this.rowItem = row;
      this.openadd = true;
    },

    handleClose(type) {
      if (type == 1) {
        this.getList();
      }
      this.addopen = false;
    },

    handleVisibleOpen(id) {
      let name = "popover-" + id;
      this.$refs[name].doShow();
    },

    handleVisibleClose(id) {
      let name = "popover-" + id;
      this.$refs[name].doClose();
    },

    handleDeleteOne(row) {
      console.log("row:", row);
      this.$message.success("删除成功!");
      // delSubUser(row.id).then(res=>{
      //   this.$message.success("删除成功!");
      //   this.getList()
      //   this.handleVisibleClose(row.id);
      // })
    },

    handleDelete() {
      if (this.multipleSelection.length) {
        this.$msgBox
          .showMsgBox({
            title: "是否确定从这个标签删除这些群",
            content: "",
          })
          .then(() => {
            this.$message.success("删除成功!");
            this.getList();
            // delScriptGroup(row.id).then(() => {
            //   this.$message.success("删除成功!");
            //   this.getScriptGroupList();
            // });
          })
          .catch(() => {});
      }
    },

    handleSet() {
      this.openset = true;
    },

    goPage(name) {
      this.$router.push({ name });
    },
  },
};
</script>

<style lang="scss" scoped>
.commtable {
  ::v-deep th.el-table__cell.is-leaf {
    padding: 12px 0 !important;
  }
}
.pagination {
  // ::v-deep .pagination-container{
  height: 52px;
  // }
}
</style>